<template>
	<view class="storeBox">
		<view class="top">
			<u-icon name="arrow-left" size="40" @click="goToBack"></u-icon>
			<text>具体订单</text>
		</view>
		<view class="searchBox">
			<view class="inputBox">
				<u-input type="text" placeholder="请输入地址、序号、姓名、手机号后四位进行搜索" icon="search" v-model="nameTakingMeal"
					confirm-type="search" @confirm="getStoreDataList"></u-input>
				<image src="https://www.yongshantuan.cn/images/yongshan/search.png" mode=""></image>
				<view class="searchButton" @click="getStoreDataList">搜索</view>
			</view>
		</view>
		<view class="tableBox" v-if="dataList.length != 0">
			<view class="table" :style="{ width: trWidthTotal + 'rpx' }">
				<view class="tr">
					<view class="td" :style="{ width: trWidthArr[4] + 'rpx' }"
						:class="{ isSort: sortType == 'merchant' }" @click="sortList('merchant')">店铺</view>
					<view class="td" :style="{ width: trWidthArr[0] + 'rpx' }"
						:class="{ isSort: sortType == 'address' }" @click="sortList('address')">
						地址
					</view>
					<view class="td" :style="{ width: trWidthArr[1] + 'rpx' }">序号</view>
					<view class="td" :style="{ width: trWidthArr[2] + 'rpx' }">姓名</view>
					<view class="td sort-col" :class="{ isSort: sortType == 'food' }"
						:style="{ width: trWidthArr[3] + 'rpx' }">菜品</view>
					<view class="td sort-col" :class="{ isSort: sortType == 'time' }" @click="sortList('time')"
						:style="{ width: trWidthArr[5] + 'rpx' }">时间</view>
				</view>
				<view class="tr" v-for="(item, index) in dataList" :key="item.id"
					:class="{ multipleOrders: item.multipleOrders }">
					<view class="td" :style="{ width: trWidthArr[4] + 'rpx' }">
						{{ item.storeName }}
					</view>
					<view class="td" :style="{ width: trWidthArr[0] + 'rpx' }">{{ item.supplyAddress }}</view>
					<view class="td" :style="{ width: trWidthArr[1] + 'rpx' }">{{ item.pickingSerialNo }}</view>
					<view class="td" :style="{ width: trWidthArr[2] + 'rpx' }">{{ item.nameTakingMeal }}</view>
					<view class="td" :style="{ width: trWidthArr[3] + 'rpx' }">
						<text v-for="(foodItem,foodIndex) in item.hcOrderDetailedList" :key="foodIndex">
							<text>{{foodItem.tradeName}}</text>
							<text :class="{'error':foodItem.commodityQuantity>1}">x{{foodItem.commodityQuantity}}</text>
							<text v-if="foodIndex!=item.hcOrderDetailedList.length-1">,</text>
						</text>
					</view>
					<view class="td" :style="{ width: trWidthArr[5] + 'rpx' }">{{ item.payTimeStr }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreDataList,
	} from '@/utils/req/api.js'
	import MyHeader from '../../components/header/header.vue'
	export default {
		components: {
			MyHeader
		},
		data() {
			return {
				dataListCopy: [],
				dataList: [],
				nameTakingMeal: '',

				pageSize: 10,
				pageNo: 1,
				moreFlag: false,

				siteId: '',
				supplyAddress: '',
				addressId: '',

				trWidthTotal: [2, 2, 2, 2, 2, 2],
				sortType: ''
			}
		},
		onLoad({
			siteId,
			supplyAddress,
			addressId
		}) {
			if (addressId) {
				this.addressId = addressId;
			} else {
				this.siteId = siteId;
				this.supplyAddress = supplyAddress;
			}
		},
		onShow() {
			this.getStoreDataList();
		},
		methods: {
			async getStoreDataList(type) {
				let res = await getStoreDataList({
					pageSize: 999999,
					pageNo: 1,
					nameTakingMeal: this.nameTakingMeal,
					siteId: this.siteId,
					supplyAddress: this.supplyAddress,
					addressId: this.addressId,
				});
				this.dataList = [];
				this.dataList = res.data.result.records;
				this.dataListCopy = JSON.parse(JSON.stringify(this.dataList));

				this.trWidthArr = [2, 2, 2, 2, 2, 2];
				this.dataList.forEach(item => {
					item.checked = false;
					if (item.supplyAddress && item.supplyAddress.length > this.trWidthArr[0]) {
						this.trWidthArr[0] = item.supplyAddress.length;
					}
					if (item.pickingSerialNo && item.pickingSerialNo.length > this.trWidthArr[1]) {
						this.trWidthArr[1] = item.pickingSerialNo.length;
					}
					if (item.nameTakingMeal && item.nameTakingMeal.length > this.trWidthArr[2]) {
						this.trWidthArr[2] = item.nameTakingMeal.length;
					}
					let _fullFood = '';
					item.hcOrderDetailedList.forEach((_, i) => {
						_fullFood = _fullFood + _.tradeName + 'x' + _.commodityQuantity
						if (i != item.hcOrderDetailedList.length - 1) {
							_fullFood = _fullFood + ','
						}
					})
					console.log('_fullFood', _fullFood);
					// 子项的名称不确定，所以该列在最后判断
					if (_fullFood.length > this.trWidthArr[3]) {
						this.trWidthArr[3] = _fullFood.length;
					}
					if (item.storeName.length > this.trWidthArr[4]) {
						this.trWidthArr[4] = item.storeName.length;
					}
					if (item.payTimeStr.length > this.trWidthArr[5]) {
						console.log('item.payTimeStr.length', item.payTimeStr.length);
						this.trWidthArr[5] = Math.floor(item.payTimeStr.length / 2);
					}
				});

				let trWidthTotal = 0;
				this.trWidthArr.forEach((item, index) => {
					this.$set(this.trWidthArr, index, item * 28 + 50);
					trWidthTotal = trWidthTotal + (item * 28 + 50) + 20;
				});
				this.trWidthTotal = trWidthTotal + 200;
				console.log('this.trWidthArr', this.trWidthArr)
			},
			// 订单排序
			sortList(type) {
				this.sortType = type;
				if (type == 'time') {
					this.dataList.sort((a, b) => {
						return new Date(a.payTimeStr) - new Date(b.payTimeStr)
					})
				} else if (type == 'address') {
					this.dataList.sort((a, b) => {
						if (a['supplyAddress'] != b['supplyAddress']) {
							return a['supplyAddress'].localeCompare(b['supplyAddress']);
						}
					})
				} else if (type == 'merchant') {
					this.dataList.sort((a, b) => {
						if (a['storeName'] != b['storeName']) {
							return a['storeName'].localeCompare(b['storeName']);
						}
					})
				}
			},

			goToBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onReachBottom() {
			if (!this.moreFlag) {
				if (this.dataList.length != 0 && this.dataList.length % this.pageSize == 0) {
					this.pageNo = this.pageNo + 1;
					this.moreFlag = true
					this.getStoreDataList('push');
					setTimeout(() => {
						this.moreFlag = false;
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storeBox {
		background-color: #F5F5F5;
		padding-bottom: 40rpx;
		min-height: 100vh;
	}

	.searchBox {
		padding: 20rpx 40rpx;
		background-color: #fff;
		border: 1px solid #eee;

		.inputBigBox {
			@include flex(space-between, center);
		}

		.searchButton {
			background-color: #FA690A;
			color: #fff;
			border-radius: 60rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			padding: 0 20rpx;
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}

		.inputBox {
			width: 100%;
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 10rpx;
				top: calc((100% - 40rpx) / 2);
			}

			.u-input {
				font-size: 28rpx;
				line-height: 2;
				background-color: #f5f5f5;
				border-radius: 100rpx;
				padding: 0 60rpx !important;

				.u-input_input {
					color: red;
				}
			}
		}

		>view:nth-child(2) {
			font-size: 28rpx;
			color: #FA690A;
			line-height: 2;
			text-align: center;
			margin-top: 20rpx;
		}
	}



	.top {
		position: relative;
		text-align: center;
		background-color: #fff;
		padding: 20rpx;

		.u-icon {
			position: absolute;
			left: 0;
		}
	}

	.tableBox {
		overflow: hidden;
		overflow-x: scroll;
		background-color: #fff;
		padding: 20rpx 0;
	}

	.table {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		scroll-view {
			width: 1000px !important;
		}

		.tr {
			display: flex;
			border: 1px solid #eee;
			border-bottom: 0;
			color: #000;
			max-height: 150rpx;

			&.multipleOrders {
				// color: #f79c9c;
			}

			&:nth-child(1) {
				background-color: #eee;
				border: 0;

				.td {
					color: #000;
				}
			}

			&:last-child {
				border-bottom: 1px solid #ccc;
			}

			.td {
				padding: 10rpx;
				font-size: 28rpx;
				width: 100rpx;
				text-align: center;
				flex-shrink: 0;
				line-height: 1.5;

				&:first-child {
					width: 50rpx;
				}

				&:last-child {
					// width: 360rpx
				}

				&:nth-child(5) {
					text-align: left;
				}

				.error {
					color: red;
					font-weight: bold;
					font-size: 32rpx;
				}

				&:last-child {
					width: 200rpx;
				}

				&.sort-col {
					font-weight: bold;
				}

				&.isSort {
					color: red;
				}
			}

		}
	}
</style>